<template>
  <section class="page-container">
    <el-divider content-position="left">
      水印
    </el-divider>

    <el-button
      v-blur
      type="primary"
      @click="createWatermarkHandle"
    >
      创建水印
    </el-button>
    <el-button
      v-blur
      type="danger"
      @click="clearWatermarkHandle"
    >
      清除水印
    </el-button>
  </section>
</template>

<script lang="ts">
import { defineComponent, onBeforeUnmount } from 'vue';

import { useWatermark } from '@/hooks';
import { formatDate } from '@/utils/index';

export default defineComponent({
  name: 'WatermarkIndex',
  setup() {
    const { setWatermark, clear } = useWatermark();

    onBeforeUnmount(() => {
      clear();
    });

    return {
      createWatermarkHandle() {
        setWatermark({
          title: 'liuminghao01',
          subtitle: formatDate(Date.now()),
        });
      },
      clearWatermarkHandle() {
        clear();
      },
    };
  },
});
</script>
